import React from 'react';
import ReactDOM from 'react-dom';

import { Slider, Modal, Alert, message } from 'antd';

import FlyBall from './../../components/FlyBall'


import './index.scss';


const style = {
	height: '70vh',
	float: "left"
};

const  g = 10, v_speed = 20;

const UPWARD = true, defaultSpeed = 10;

const LANDSCAPE = 'landscape'; //这里是横屏
const PORTRAIT = 'portrait'; //这里是竖屏

const GOAL = [70,80];
const BALLSTARGET = { sx: 478, sy: 180 };
// const BALLSTARGET = { sx: 470, sy: 120 };

let touchSi,randomSpeed=10,result=[], touchTime=0;





class Ball extends React.Component {
	constructor(...args){
		super(...args);
	}
	render(){
		return(
			<div className={`ball ${this.props.active ? 'active' : ''} `} style={{ left: this.props.x , top: this.props.y }}></div>
			)
	}
}

class Frame extends React.Component{
	constructor(...args){
		super(...args);
	}
	render(){
		return(
			<div className="ball-frame"></div>
			)
	}
}



class Arm extends React.Component {
	constructor(...args){
		super(...args);
	}
	render(){
		return(
			<div className={`arm-wrap ${this.props.active ? 'active' : ''} `}></div>
			)
	}
}

class Mark extends React.Component {
	constructor(...args){
		super(...args);
	}
	render(){
		return(
			<div className='mark' style={{ display: `${this.props.orientation == PORTRAIT ? 'block' : 'none' }` }}>

			</div>
		)
	}
}












export default class Shoot extends React.Component {
	constructor(props){
		super(props);
		this.state={
			target: BALLSTARGET,
			ballsTarget: { },
			// ballsTarget: { sx: 560, sy: 170 },
			ballsPosition: { sx: 120, sy: 300},
		    // 抛物小球
		    balls: [],


		    goal: GOAL,
		    timePoint: 0,
		    speed: randomSpeed,
		    Upward: UPWARD,
		    orientation: PORTRAIT,


		    active: false,
		    curvature: 0.003,


		    playing: false,
		}
		
	}

	componentWillMount (){
		document.oncontextmenu = function (e) { return false; }
	}

	componentDidMount (){
		var updateOrientation = ()=>{
			var orientation = window.orientation;
			switch(orientation){
				case 90:
				case -90:
				this.setState({
						orientation: LANDSCAPE, //这里是横屏
					})
				break;
				default:
				this.setState({
						orientation: PORTRAIT, //这里是竖屏
					})
				break;
			}

			//html根据不同的旋转状态，加上不同的class，横屏加上landscape，竖屏
			//加上portrait
			// document.body.parentNode.setAttribute('class',orientation);
		};

		// 每次旋转，调用这个事件。
		window.addEventListener('orientationchange',updateOrientation,false);

		// 事件的初始化
		updateOrientation();
	}


	handler(){
		return false;
	}

	render(){
		return(
			<div className="shoot-wrap">
				<div className="games-wrap"
				onTouchStart={ this.touchStart.bind(this) }
				onTouchEnd={ this.touchEnd.bind(this) } 
				>
					<p>{ this.state.timePoint }</p>
					<p>{ this.state.speed }</p>
					<p>%PUBLIC_URL%</p>

					<FlyBall
					changeFlyBallCount={this.changeFlyBallCount.bind(this)}
					balls={this.state.balls}
					target={this.state.ballsTarget}
					curvature={this.state.curvature}
					speed={100}/>
					<div className="flyBall" style={{ 
						transform: `translate(${this.state.ballsPosition.sx}px, ${this.state.ballsPosition.sy}px ) `,
						display: `${this.state.balls.length != 0 ? 'none' : 'block'}`
						}} />

					<div className="board" style={{ transform: `translate(${this.state.target.sx+17-25}px, ${this.state.target.sy-60}px)` }} >
						<div className='target'  />
					</div>

				</div>
				<div className="slider-wrap">
					<div className="goal" style={{ height: (this.state.goal[1] - this.state.goal[0])+"%", top: (100 - this.state.goal[1])+"%" }}>
						<span>{ this.state.goal[1] }</span>
						<span>{ this.state.goal[0] }</span>
					</div>
					<Slider style={style} vertical disabled value={ this.state.timePoint } />
				</div>


			</div>
		)   
	}


	touchStart(ev){
		if(!this.state.playing){
			randomSpeed = defaultSpeed+parseInt(Math.random()*5);
			touchTime = 0;
			this.setState({
				timePoint: 0,
				active: false,
				Upward: UPWARD,
				speed: randomSpeed,

				balls: [],

				x: '10vw',
				y: '90vh',
			});

			touchSi = setInterval(()=>{
				this.setState({
					Upward: (this.state.timePoint == 0 || this.state.timePoint == 100) ? !this.state.Upward : this.state.Upward
				});
				this.setState({
					timePoint: !this.state.Upward ? ++this.state.timePoint : --this.state.timePoint,
				});


				touchTime += randomSpeed
			},randomSpeed)
		}else{
			return false;
		}

	}


	touchEnd(e){
		if(!this.state.playing){
			var state = this.state, _goal = state.goal;
			this.setState({
				playing: !state.playing,
				ballsTarget: (
					(state.timePoint >= _goal[0] && state.timePoint <= _goal[1]) ? 
						// BALLSTARGET
						{ sx:BALLSTARGET.sx+80, sy: state.ballsPosition.sy+50 }
					 	: (
							state.timePoint > _goal[1] ? { sx:BALLSTARGET.sx+(parseInt( Math.random()*100 + 80 ) ), sy: state.ballsPosition.sy } : 
													 { sx:BALLSTARGET.sx-(parseInt( Math.random()*100 ) ), sy: state.ballsPosition.sy }
						)
				),
				curvature: (
					// state.timePoint > _goal[1] ? (0.003+parseInt(Math.random()*2)/1000) : (0.0035-parseInt(Math.random())/1000),

					(state.timePoint >= _goal[0] && state.timePoint <= _goal[1]) ? 0.005 : 0.0035 
				)

			})
			this.showFlyBall(e);
			
			clearInterval(touchSi);
		}else{
			return false;
		}
		
	}

	getBallPosition(rect,radian,step){


	}

	changeFlyBallCount(id) {
		console.log(`ball: ${id} hidden`)
		let state = this.state
		let balls = state.balls
		// for (let i=0; i<balls.length; i++) {
		// 	if(balls[i].id === id) {
		// 		balls.splice(i, 1)
		// 		break
		// 	}
		// }
		// this.setState({
		// 	balls: Object.assign([], state.balls)
		// })
		console.log(this.state.balls)
		this.setState({
			// balls: Object.assign([], state.balls),
			playing: !this.state.playing
		})
	}

	showFlyBall(e) {

		let state = this.state
	    // console.log('eee:', e.pageY, e.pageX, this.props.source);
	    let balls = this.state.balls
	    let len = balls.length

	    let newball ={
	    	id: new Date().getTime(),
	    	position: {
	    		x: state.ballsPosition.sx,
	    		y: state.ballsPosition.sy
	    		// x: e.pageX,
	    		// y: e.pageY
	    	}
	    }
	    balls.push(newball)
	    this.setState({
	    	balls: Object.assign([], balls),
	    })
	}
}